<template>
  <view class="disFlx bgf flex-wrap justify-between px-12 mb-12">
    <view
      class="disFlxCC gap-4"
      v-for="(item, index) in numDatas"
      :key="index"
      style="width: 222rpx; height: 160rpx"
    >
      <text class="fz-18 linh-28 font-bold">{{ item.num }}</text>
      <view class="disFlxAC" style="color: #969799" @click="item.fn">
        <text class="fz-12 linh-16">{{ item.text }}</text>
        <text class="ali-icon fz-12" @click="item.fn">&#xe67b;</text>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
  import { getBoCountInfo } from '@/api/businessOpportunities';
  import { navigateTo } from '@/router';
  import { onMounted, reactive, ref, type PropType } from 'vue';

  const props = defineProps({
    id: {
      type: Number as PropType<number>,
      rqeuired: true,
    },
  });

  const toDetail = () => {
    navigateTo({
      name: 'businessOpportunitiesData',
      options: {
        boInfoId: props.id!,
      },
    });
  };

  const toIntentionCooperation = () => {
    navigateTo({
      name: 'intentionCooperation',
      options: {
        id: props.id!,
        type: 'list',
        boType: boType.value,
        title: title.value,
      },
    });
  };

  const numDatas = reactive<{ num: number | undefined; text: string; fn: () => void }[]>([
    {
      num: 0,
      text: '浏览人数',
      fn: toDetail,
    },
    { num: 0, text: '浏览次数', fn: toDetail },
    {
      num: 0,
      text: '收藏人数',
      fn: () => {
        navigateTo({
          name: 'businessOpportunitiesData',
          options: {
            boInfoId: props.id!,
            currentTab: 4,
          },
        });
      },
    },
    { num: 0, text: '合作意向', fn: toIntentionCooperation },
    { num: 0, text: '待联系', fn: toIntentionCooperation },
    { num: 0, text: '已联系', fn: toIntentionCooperation },
  ]);

  onMounted(() => {
    queryBoCountInfo();
  });

  const title = ref();
  const boType = ref();
  const queryBoCountInfo = async () => {
    const res = await getBoCountInfo(props.id!);
    numDatas[0].num = res.browsePeopleNum || 0;
    numDatas[1].num = res.browseNum || 0;
    numDatas[2].num = res.collectPeopleNum || 0;
    numDatas[3].num = res.cooperationNum || 0;
    numDatas[4].num = res.waitMatchNum || 0;
    numDatas[5].num = res.cooperationSuccessNum || 0;
    title.value = res.title;
    boType.value = res.boType;
  };

  defineExpose({
    queryBoCountInfo,
  });
</script>
<style lang="scss" scoped></style>
